<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
    <title>Remember The Milk signup form - jQuery Validate plugin demo - with friendly permission from the RTM
        team</title>

    <link rel="stylesheet" type="text/css" media="screen" href="milk.css"/>
    <link rel="stylesheet" type="text/css" media="screen" href="../css/chili.css"/>

    <script src="../../lib/jquery.js" type="text/javascript"></script>
    <script src="../../jquery.validate.js" type="text/javascript"></script>

    <style type="text/css">
        pre {
            text-align: left;
        }
    </style>

    <script id="demo" type="text/javascript">
        $(document).ready(function () {
            // validate signup form on keyup and submit
            var validator = $("#signupform").validate({
                rules: {
                    firstname: "required",
                    lastname: "required",
                    username: {
                        required: true,
                        minlength: 2,
                        remote: "users.php"
                    },
                    password: {
                        required: true,
                        minlength: 5
                    },
                    password_confirm: {
                        required: true,
                        minlength: 5,
                        equalTo: "#password"
                    },
                    email: {
                        required: true,
                        email: true,
                        remote: "emails.php"
                    },
                    dateformat: "required",
                    terms: "required"
                },
                messages: {
                    firstname: "Enter your firstname",
                    lastname: "Enter your lastname",
                    username: {
                        required: "Enter a username",
                        minlength: jQuery.format("Enter at least {0} characters"),
                        remote: jQuery.format("{0} is already in use")
                    },
                    password: {
                        required: "Provide a password",
                        rangelength: jQuery.format("Enter at least {0} characters")
                    },
                    password_confirm: {
                        required: "Repeat your password",
                        minlength: jQuery.format("Enter at least {0} characters"),
                        equalTo: "Enter the same password as above"
                    },
                    email: {
                        required: "Please enter a valid email address",
                        minlength: "Please enter a valid email address",
                        remote: jQuery.format("{0} is already in use")
                    },
                    dateformat: "Choose your preferred dateformat",
                    terms: " "
                },
                // the errorPlacement has to take the table layout into account
                errorPlacement: function (error, element) {
                    if (element.is(":radio"))
                        error.appendTo(element.parent().next().next());
                    else if (element.is(":checkbox"))
                        error.appendTo(element.next());
                    else
                        error.appendTo(element.parent().next());
                },
                // specifying a submitHandler prevents the default submit, good for the demo
                submitHandler: function () {
                    alert("submitted!");
                },
                // set this class to error-labels to indicate valid fields
                success: function (label) {
                    // set &nbsp; as text for IE
                    label.html("&nbsp;").addClass("checked");
                },
                highlight: function (element, errorClass) {
                    $(element).parent().next().find("." + errorClass).removeClass("checked");
                }
            });

            // propose username by combining first- and lastname
            $("#username").focus(function () {
                var firstname = $("#firstname").val();
                var lastname = $("#lastname").val();
                if (firstname && lastname && !this.value) {
                    this.value = (firstname + "." + lastname).toLowerCase();
                }
            });

        });
    </script>

</head>
<body>

<h1 id="banner"><a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/">jQuery Validation Plugin</a>
    Demo</h1>

<div id="main">

    <div id="content">

        <div id="header">
            <div id="headerlogo"><img src="milk.png" alt="Remember The Milk"/></div>
        </div>
        <div style="clear: both;">
            <div></div>
        </div>


        <div class="content">
            <div id="signupbox">
                <div id="signuptab">
                    <ul>
                        <li id="signupcurrent"><a href=" ">Signup</a></li>
                    </ul>
                </div>
                <div id="signupwrap">
                    <form id="signupform" autocomplete="off" method="get" action="">
                        <table>
                            <tr>
                                <td class="label"><label id="lfirstname" for="firstname">First Name</label></td>
                                <td class="field"><input id="firstname" name="firstname" type="text" value=""
                                                         maxlength="100"/></td>
                                <td class="status"></td>
                            </tr>
                            <tr>
                                <td class="label"><label id="llastname" for="lastname">Last Name</label></td>
                                <td class="field"><input id="lastname" name="lastname" type="text" value=""
                                                         maxlength="100"/></td>
                                <td class="status"></td>
                            </tr>
                            <tr>
                                <td class="label"><label id="lusername" for="username">Username</label></td>
                                <td class="field"><input id="username" name="username" type="text" value=""
                                                         maxlength="50"/></td>
                                <td class="status"></td>
                            </tr>
                            <tr>
                                <td class="label"><label id="lpassword" for="password">Password</label></td>
                                <td class="field"><input id="password" name="password" type="password" maxlength="50"
                                                         value=""/></td>
                                <td class="status"></td>
                            </tr>
                            <tr>
                                <td class="label"><label id="lpassword_confirm" for="password_confirm">Confirm
                                    Password</label></td>
                                <td class="field"><input id="password_confirm" name="password_confirm" type="password"
                                                         maxlength="50" value=""/></td>
                                <td class="status"></td>
                            </tr>
                            <tr>
                                <td class="label"><label id="lemail" for="email">Email Address</label></td>
                                <td class="field"><input id="email" name="email" type="text" value="" maxlength="150"/>
                                </td>
                                <td class="status"></td>
                            </tr>
                            <tr>
                                <td class="label"><label>Which Looks Right</label></td>
                                <td class="field" colspan="2" style="vertical-align: top; padding-top: 2px;">
                                    <table>
                                        <tbody>

                                        <tr>
                                            <td style="padding-right: 5px;">
                                                <input id="dateformat_eu" name="dateformat" type="radio" value="0"/>
                                                <label id="ldateformat_eu" for="dateformat_eu">14/02/07</label>
                                            </td>
                                            <td style="padding-left: 5px;">
                                                <input id="dateformat_am" name="dateformat" type="radio" value="1"/>
                                                <label id="ldateformat_am" for="dateformat_am">02/14/07</label>
                                            </td>
                                            <td>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </td>
                            </tr>

                            <tr>
                                <td class="label">&nbsp;</td>
                                <td class="field" colspan="2">
                                    <div id="termswrap">
                                        <input id="terms" type="checkbox" name="terms"/>
                                        <label id="lterms" for="terms">I have read and accept the Terms of Use.</label>
                                    </div>
                                    <!-- /termswrap -->
                                </td>
                            </tr>
                            <tr>
                                <td class="label"><label id="lsignupsubmit" for="signupsubmit">Signup</label></td>
                                <td class="field" colspan="2">
                                    <input id="signupsubmit" name="signup" type="submit" value="Signup"/>
                                </td>
                            </tr>

                        </table>
                    </form>
                </div>
            </div>
        </div>

    </div>

</div>


<script type="text/javascript">
    $(document).ready(function () {
        $("<a href='#'>Show script used on this page</a><br/>").appendTo("body").click(function () {
            script.toggle();
            return false;
        });
        $("<a href='#'>Show serverside script</a>").appendTo("body").click(function () {
            serverscript.toggle();
            return false;
        });
        var script = $("<code class='mix'>").html($("#demo").html()).wrap("<pre></pre>").parent().hide().appendTo("body");
        var serverscript;
        $.get("users.phps", function (response) {
            serverscript = $("<pre>").hide().html(response).appendTo("body");
        })

    });
</script>

<script src="../js/chili-1.7.pack.js" type="text/javascript"></script>

</body>
</html>